<template>
  {{ data }}
</template>

<script lang='ts' setup>
import axios from 'axios';
import { reactive } from 'vue';


/**
 * 在setup语法糖中直接使用异步函数await 会报警告
 *  Component <Anonymous>: setup function returned a promise, but no <Suspense> boundary was found in the parent component tree. A component with async setup() must be nested in a <Suspense> in order to be rendered.
 * 解决方案有：
 * 1、在父组件通过Suspense包裹子组件;
 * 2、嵌套一个函数来添加async关键字;
*/
const data = reactive({})

const res = await axios.get('https://jsonplaceholder.typicode.com/todos/1')
Object.assign(data, res.data)
console.log(data);

</script>

<style scoped lang='scss'>
</style>
